<template>
    <div class="tree-file" @click="setActive" :class="{'active' : active == this.file}">
        <el-tag size="small" v-if="file.type == 'get'">GET</el-tag>
        <el-tag size="small" v-if="file.type == 'post'" type="success">POST</el-tag>
        <el-tag size="small" v-if="file.type == 'put'" type="warning">PUT</el-tag>
        <el-tag size="small" v-if="file.type == 'delete'" type="danger">DEL</el-tag>
        <span class="tree-file-name">{{file.title || file.url}}</span>
    </div>
</template>

<script>
export default {
    props: ['file'],
    computed: {
        active() {
            return this.$store.state.activeFile
        }
    },
    methods: {
        setActive() {
            this.$bus.$emit('activeFileData', this.file);
            this.$store.commit('activeFileData', this.file)
        }
    }
}
</script>

<style>
</style>